<script setup lang="ts">
import { loginFn } from '@/api/login';
import { ref } from 'vue';
import type { Ref } from 'vue';


const checked: Ref<boolean> = ref(false)
const mobilephone: Ref<string> = ref('')
const password: Ref<string> = ref('')
function loginClick(){
    loginFn({usertel:mobilephone.value,userpsw:password.value}).then(res=>{
        console.log(11,res);
        
    })
}
</script>
<template>
    <div class="content">
        <div class="header">
            <van-nav-bar title="登录" left-text="返回" left-arrow />
        </div>
        <div class="nr">
            <p class="login-appname">登录应用名称</p>
            <span class="start">开始趣味学习体验</span>
            <!-- 可以使用 CellGroup 作为容器 -->
            <van-cell-group inset>
                <van-field v-model="mobilephone" type="number" placeholder="请输入手机号"
                    style="background-color: #f7f7f7;width: 80vw;" />
                <van-field v-model="password" type="number" placeholder="请输入密码"
                    style="background-color: #f7f7f7;width: 80vw;margin-top: 4vw;" />
            </van-cell-group>

            <van-button color="#265AE8" class="phoneLogin" @click="loginClick">登录</van-button>


            <p class="warning" @click="$router.push('/home/forgetPassword')">忘记密码</p>

        </div>

    </div>
</template>
<style lang="scss" scoped>
//::v-deep
.custom-input .van-field__control {
    background-color: #e73f3f;
}

.nr {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 14vw;

    .login-appname {
        font-size: 0.2rem;
    }

    .start {
        margin-top: 2vw;
        margin-bottom: 14vw;
        color: #ccc;
    }

    .phoneLogin {
        margin-top: 4vw;
        margin-bottom: 4vw;
    }

    .van-button {
        width: 80vw;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        line-height: 44px;
    }

    .warning {
        font-size: 0.12rem;
        color: #265AE8;
    }
}
</style>